<template>
    <div>
        <div>点击</div>
        <el-table stripe border :data="dataList" style="width: 100%">
            <el-table-column prop="url" label="URL"></el-table-column>
            <el-table-column prop="create_time" label="上报时间">
                <template slot-scope="scope">
                    <div>{{getDateFormat(scope.row.create_time)}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="node_name" label="节点名称"></el-table-column>
            <el-table-column prop="click_html" label="点击内容"></el-table-column>
            <el-table-column prop="click_text" label="点击节点"></el-table-column>
        </el-table>
        <div class="bottom-page mg-top-10">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :current-page.sync="page.index"
                @current-change="getList"
            >
            </el-pagination>
            <div class="mg-left-10">共计：{{page.total}}</div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
    data() {
        return {
            page: {
                index: 1,
                size: 10,
                total: 0
            },
            dataList: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getDateFormat (time) {
            return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
        },
        getTimeFormat (time) {
            const oneSecond = 1000
            const oneMinute = 60 * 1000
            const oneHour = 60 * 60 * 1000
            // 不到1秒
            if (time < oneSecond) {
                return `${time}毫秒`
            }
            // 不到一分
            if (time < oneMinute) {
                return `${Math.floor(time/oneSecond)}秒`
            }
            // 不到一时
            if (time < oneHour) {
                let minute = Math.floor(time / (oneMinute))
                let second = Math.floor(time % (oneMinute) / oneSecond)
                return `${minute}分${second}秒`
            }
            let hour = Math.floor(time / oneHour)
            let minute = Math.floor((time - hour * oneHour) / oneMinute)
            let second = Math.floor((time - hour * oneHour - minute * oneMinute) / oneSecond)
            return `${hour}时${minute}分${second}秒`

        },
        getList() {
            this.axios
                .get("/stat/getClickList", {
                    params: { pageIndex: this.page.index, pageSize: this.page.size },
                })
                .then((res) => {
                    this.dataList = res.data.rows
                    this.page.total = res.data.count
                });
        },
    },
};
</script>

<style scoped>
.oneline {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bottom-page {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>